<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(item, index) in formaltData" :key="index">
        <img :src="item.img" alt="">
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</template>
<script>
export default {
  props:['bannerData'],
  components: {},
  name: "",
  data() {
    return {};
  },
  computed:{
    formaltData(){
      return this.bannerData
    }
  },
  methods: {
    init(){
      this.$nextTick(()=>{
        var mySwiper = new Swiper('.swiper-container', {
          autoplay:{
            delay:15000,
          },
          loop:true,
          pagination: {
            el: '.swiper-pagination',
          },
        })
      })
    }
  },
  created() {
    this.init()
  }
};
</script>
<style lang="scss" scoped>
.swiper-container {
  width: 100%;
  height: 450px;
}
.swiper-slide{
  width: 100%;
  img{
    width: 100%;
    min-height: 100%;
  }
}
</style>